<template>
    <ph-layer :visible="visible" @click="$emit('mask-click')">
        <div :class="cn" @click.stop>
            <header class="ph-window-header">
                <slot name="title"></slot>
            </header>
            <div class="ph-window-body">
                <slot></slot>
            </div>
            <ph-button-group :container="true" :justify="actionAlign">
                <slot name="action">
                        <ph-button :radius="true" @click="$emit('close')">关闭</ph-button>
                        <ph-button :radius="true" type="primary" @click="$emit('done')">确定</ph-button>
                </slot>
            </ph-button-group>
        </div>
    </ph-layer>
</template>
<script lang="ts">
import { defineComponent,computed } from 'vue'
import {PhLayer,PhButton,PhButtonGroup} from '../base'
export default defineComponent({
    props:{
        max:{type:Boolean,default:true},
        min:{type:Boolean,default:true},
        type:String,
        visible:Boolean,
        "action-align":{
            type:String,
            default:"flex-end"
        }
    },
    setup(){
        const cn = computed(()=>{
            return {
                'ph-window':true
            }
        })
        return {cn}
    },
    components:{PhLayer,PhButtonGroup,PhButton}
})
</script>

<style lang="scss">
    .ph-window{
        color: var(--ph-c);
        display: flex;
        flex-direction: column;
        flex:0 0 auto;
        background-color: #FFF;
        box-shadow: 1px 1px var(--ph-30) rgb(0 0 0 / 30%);
        overflow: hidden;
        border-radius: 8px;
        font-size:var(--phx);
        min-width:var(--ph-window-width);
        &-body{
            padding: var(--ph-10) var(--ph-15);
            flex: 1;
            -webkit-overflow-scrolling: touch;
            overflow: auto;
        }
        &-header{
            flex: 0 0 auto;
            padding: var(--ph-10) var(--ph-15);
            border-bottom: 1px solid var(--ph-bd-light);
            color: var(--ph-c);
            background-color: var(--ph-light-l1);
            overflow: hidden;
        }
        .ph-btn-container{
            padding: var(--ph-10) var(--ph-15);
            margin-bottom: 0;
        }
    }
</style>